<template>
  <div>
    <template v-if="aliGoods">
      <div class="sku-goods" :class="{
        'expired-goods': expired,
      }">
        <div class="sku-image">
          <img :src="aliGoods.image" alt="" style="cursor: pointer" @click="jumpLink(aliGoods.link)">
        </div>
        <div class="sku-info">
          <el-tooltip class="item" effect="dark" :content="aliGoods.subject" placement="top">
            <div class="hidden-1" style="cursor: pointer" @click="jumpLink(aliGoods.link)">{{aliGoods.subject}}</div>
          </el-tooltip>
          <div class="sku-price">
            <span>价格：</span>
            <span class="price-num" style="">¥ {{aliGoods.price}}</span>
            <el-tag type="info" size="small" style="float: right" v-if="expired">已失效</el-tag>
          </div>
          <div class="goods-SKU-info hidden-1" v-if="aliGoods && aliGoods.attributes.length > 0">
                        <span
                          v-for="attr in aliGoods.attributes"
                          :key="attr.name"
                          class="attr"
                        >
                          {{attr.name}} : {{attr.value}}
                          <span class="attr-link"> | </span>
                        </span>
          </div>
        </div>
      </div>
    </template>
    <template v-else>未配置</template>
  </div>
</template>

<script>
import {jumpLink} from "@/utils/common";

export default {
  name: "aliGoods",
  methods: {jumpLink},
  props:{
    aliGoods: {
      validator: function(value) {
        return value === null || typeof value === 'object';
      },
      required: true,
    }
  },
  computed:{
    expired(){
      let flag = false;
      if(this.aliGoods.isExpired){
        flag = true
      }
      if(this.aliGoods.amountOnSale <= 0){
        flag = true
      }
      return flag
    }
  }
}
</script>

<style scoped lang="scss">
.sku-goods{
  font-weight: bold;
  .sku-image{
    float: left;
    img{
      width: 85px;
    }
  }
  .sku-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 85px;
    padding-left: 10px;
    .sku-price .price-num{
      font-size: 14px;
      color: #FC6347;
    }
  }
}
.expired-goods{
  color: #DDDDDD !important;
  .price-num{
    color: #DDDDDD !important;
  }
  .goods-SKU-info{
    color: #DDDDDD !important;
  }
}
</style>
